<template>
  <div class="mainua">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <!-- 顶部返回 -->
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>满减满赠</span>
          </div>
        </div>
        <div class="main_tile boxdq marginTop10 container">
          <el-tabs v-model="activeName">
            <el-tab-pane label="满减" name="1"></el-tab-pane>
            <el-tab-pane label="满赠" name="2"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <marketing-full-reduce
            ref="marketingFullReduce"
            @back="back"
            v-if="activeName == 1"
          ></marketing-full-reduce>
          <marketing-full-plus
            ref="marketingFullPlus"
            @back="back"
            v-if="activeName == 2"
          ></marketing-full-plus>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MarketingFullPlus from "./marketingFullAdd/marketingFull_plus.vue";
import MarketingFullReduce from "./marketingFullAdd/marketingFull_reduce.vue";
export default {
  components: {
    MarketingFullPlus,
    MarketingFullReduce,
  },
  data() {
    return {
      activeName: "1",
    };
  },
  methods: {
    back() {
      this.isEdit = false;
      this.$router.back(-1);
    },
  },
  beforeRouteLeave(to, from, next) {
    let reduce_isEdit = "";
    let plus_isEdit = "";
    if (this.$refs["marketingFullReduce"]) {
      reduce_isEdit = this.$refs["marketingFullReduce"].isEdit;
    }
    if (this.$refs["marketingFullPlus"]) {
      plus_isEdit = this.$refs["marketingFullPlus"].isEdit;
    }

    if (reduce_isEdit || plus_isEdit) {
      setTimeout(() => {
        this.$confirm(
          "您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            next();
          })
          .catch(() => {
            next(false);
          });
      }, 200);
    } else {
      next();
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20px;
  margin-top: 15px;
}
/deep/.el-tabs {
  width: 100%;
  .el-tabs__item {
    font-size: 16px;
    &:hover {
      color: #03a98e !important;
    }
  }
  .is-active {
    color: #03a98e !important;
  }
  .el-tabs__active-bar {
    background-color: #03a98e;
  }
}
/deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
  box-shadow: none !important;
}
</style>